<template>
  <div class="form">
    <el-alert title="特别说明" description="这里放置说明内容" type="warning" show-icon></el-alert>
    <el-form
      :inline="true"
      :model="form"
      class="demo-form-inline"
      label-width="80px"
      ref="form"
    >
      <div>
        <el-form-item
          label="设备类型"
          prop="value"
          :rules="[  { required: true, message: '不能为空'}, ]"
        >
          <el-select v-model="form.value" placeholder="设备类型">
            <el-option
              :key="item.value"
              v-for="item in form.deviceCategory"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="设备编号" prop="name">
          <el-input v-model="form.deviceId" placeholder="设备编号" type="number"></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="设备名称" prop="name">
          <el-input v-model="form.deviceName" placeholder="设备名称"></el-input>
        </el-form-item>
        <el-form-item label="优先级" prop="priority">
          <el-input-number v-model="form.priority" placeholder="输入1~10"  max:10 min:1></el-input-number>
        </el-form-item>
      </div>
<!--      <div>-->
<!--        <el-form-item label="分组" prop="planId">-->
<!--          <el-select v-model="dataForm.planId" placeholder="分组">-->
<!--            <el-option-->
<!--              :key="item.id"-->
<!--              v-for="item in deviceGroups"-->
<!--              :label="item.name"-->
<!--              :value="item.id"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--      </div>-->
    </el-form>
  </div>
</template>

<script>

import axios from "axios";
export default {
  data: function () {
    return {
      form: {
        deviceId: '',
        deviceName: '',
        deviceCategory: [
          {
            value: '选项1',
            label: '摄像头'
          }, {
            value: '选项2',
            label: '传感器'
          }
          ],

        value:'',
        priority: ''
      },
      mounted() {
      },
      computed: {},
      methods: {
        invoke(){

        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.form {
  background: #fff;

  .demo-form-inline {
    width: 800px;
    margin: auto;
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
</style>

